import React, { useEffect, useState } from 'react';
import Mycharts from '../../../component/Mycharts';
import datapic from "../../../picture/data.png"
import { charts_list, vipdata_list } from "../../../utils/vip/api"
import {
    Form,
    Input,
    DatePicker,
} from 'antd';
import "../../../styles/Charts.scss"
import { Menu } from 'antd';
import { Card, Col, Row } from 'antd';
import { Space, Table, Tag } from 'antd';
import * as echarts from 'echarts';


const items = [
    {
        label: '今日',
        key: '1',
    },
    {
        label: '昨日',
        key: '2',
    },
    {
        label: '最近七天',
        key: '3',
    },
    {
        label: '最近30天',
        key: '4',
    },

];
const columns = [
    {
        title: '会员等级',
        dataIndex: 'grade',
    },
    {
        title: '成交会员数',
        dataIndex: 'bargain',

    },
    {
        title: '成交会员占比',
        dataIndex: 'proportion',
    },
    {
        title: '支付订单数',
        dataIndex: 'ordernum',
    },
    {
        title: '客单价(元)',
        dataIndex: 'unitprice',

    },
    {
        title: '支付金额',
        dataIndex: 'price',
    },
    {
        title: '支付金额占比',
        dataIndex: 'percent',
    },


];


function Growrole(props) {

    var [xaxis, setXaxis] = useState();
    var [series, setSeries] = useState();
    const [list, setList] = useState([])
    const [arrlist, setArrlist] = useState([])
    var [data, setData] = useState([])

    useEffect(() => {
        var chartDom = document.getElementById('echarts');
        var myChart = echarts.init(chartDom);

        var option;
        option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['成交会员数', '成交会员占比', '支付订单数', '客单价', '支付金额占比']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '成交会员数',
                    type: 'line',
                    stack: 'Total',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '成交会员占比',
                    type: 'line',
                    stack: 'Total',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '支付订单数',
                    type: 'line',
                    stack: 'Total',
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '客单价',
                    type: 'line',
                    stack: 'Total',
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: '支付金额占比',
                    type: 'line',
                    stack: 'Total',
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };

        option && myChart.setOption(option);
    })

    //会员数据明细请求
    useEffect(() => {
        vipdata_list().then((res) => {
            console.log(res.data);
            setData(res.data)
        })

    }, [])
    //echarts 请求列表
    useEffect(() => {
        charts_list().then((res) => {
            setXaxis(res.data[0].xAxis)
            setSeries(res.data[0].series)
            console.log(xaxis, series);
        })
    }, [])

    const [current, setCurrent] = useState('mail');
    const onClick = (e) => {
        console.log('click ', e);
        setCurrent(e.key);
    };
    const { RangePicker } = DatePicker;
    const { TextArea } = Input;
    return (
        <div className='dealthink'>

            <div className='top'>
                <div>会员分析</div>
                <Form
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 14 }}
                    layout="horizontal" >
                    <Form.Item label="统计日期：">
                        <RangePicker />
                    </Form.Item>
                </Form>
                <div>
                    <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} className='menu' />
                </div>
            </div>
            <div className="site-card-wrapper">
                <Row gutter={16} style={{ display: "flex", justifyContent: "space-between", marginLeft: "20px" }}>
                    <Col span={5}>
                        <Card title="累计会员数" bordered={false}>
                            <h3>126,234</h3>
                            <span>较上期</span><span><img src={datapic} alt="" style={{ width: "70px", marginLeft: "10px" }} /></span>
                        </Card>
                    </Col>
                    <Col span={5}>
                        <Card title="新增会员数" bordered={false}>
                            <h3>1262</h3>
                            <span>较上期</span><span><img src={datapic} alt="" style={{ width: "70px", marginLeft: "10px" }} /></span>
                        </Card>
                    </Col>
                    <Col span={5}>
                        <Card title="支付会员数" bordered={false}>
                            <h3>960</h3>
                            <span>较上期</span><span><img src={datapic} alt="" style={{ width: "70px", marginLeft: "10px" }} /></span>
                        </Card>
                    </Col>
                    <Col span={5}>
                        <Card title="储值会员数" bordered={false}>
                            <h3>457</h3>
                            <span>较上期</span><span><img src={datapic} alt="" style={{ width: "70px", marginLeft: "10px" }} /></span>
                        </Card>
                    </Col>
                </Row>
            </div>
            <Mycharts list={xaxis} arrlist={series} />
            <div id='echarts' style={{ width: 1200, height: 500, padding: 40, }}>

            </div>
            <div>
                <div style={{ padding: "20px" }}>数据明细</div>
                <Table columns={columns} dataSource={data} style={{ textAlign: "center" }} />
            </div>
        </div>
    );
}

export default Growrole;